<template>
  <div class="dcac-container">
    <!-- ECharts 图表容器 -->
    <div id="chart-container" style="width: 100%; height: 350px;"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';

onMounted(async () => {
  // 获取图表容器 DOM
  const chartDom = document.getElementById('chart-container');
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartDom);

  // 初始化图表配置
  const option = {
    title: {
      text: '2018-2022全国直流充电桩和交流充电桩数量',
      top: 10,
      left: "center",
      textStyle: {
        color: '#ffffff',
        fontFamily: 'YouYuan',
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 显示阴影指示器
      },
    },
    legend: {
      data: ['直流电桩', '交流电桩'], // 图例名称
      top: 40,
      textStyle: {
        color: '#ffffff', // 图例文字颜色
      },
    },
    xAxis: {
      type: 'category',
      data: [], // 初始为空
      axisLabel: {
        color: '#ffffff', // 设置 x 轴文字颜色为白色
      },
    },
    yAxis: {
      axisLabel: {
        color: '#ffffff', // 设置 y 轴文字颜色为白色
      },
    },
    series: [
      {
        name: '直流电桩',
        type: 'bar',
        data: [], // 初始为空
        itemStyle: {
          color: '#a7ff83', // 设置柱状图颜色为绿色
        },
      },
      {
        name: '交流电桩',
        type: 'bar',
        data: [], // 初始为空
        itemStyle: {
          color: '#a1d9ff', // 设置柱状图颜色为蓝色
        },
      },
    ],
    grid: {
      top: "25%",
      left: "2%",
      right: "5%",
      bottom: "2%",
      containLabel: true,
    },
  };

  // 设置初始配置
  myChart.setOption(option);

  try {
    // 获取数据
    const response = await axios.get('/api/queryAllDcAc'); // 你实际的 API 地址
    const data = response.data.data;

    // 提取数据
    const xAxisData = data.map(item => item.times);
    const dcChinaData = data.map(item => item.dcChina);
    const acChinaData = data.map(item => item.acChina);

    // 更新图表配置
    const updatedOption = {
      ...option,
      xAxis: {
        ...option.xAxis,
        data: xAxisData, // 使用从 API 获取的 x 轴数据
      },
      series: [
        {
          ...option.series[0],
          data: dcChinaData, // 使用从 API 获取的 DC 数据
        },
        {
          ...option.series[1],
          data: acChinaData, // 使用从 API 获取的 AC 数据
        },
      ],
    };

    // 更新图表
    myChart.setOption(updatedOption);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
});
</script>

<style scoped>
.dcac-container {
  width: 100%;
  height: 100%;
  padding: 10px;
}

h2 {
  color: #ffffff; /* 设置标题文字颜色为白色 */
  text-align: center;
  margin-bottom: 20px;
}

#chart-container {
  width: 100%;
  height: 400px; /* 设置图表高度 */
}
</style>
